// 文章详情组件
const postDetailComponent = {
    template: `<div class="post-detail-overlay">
        <div class="post-detail-modal">
            <div class="post-detail-header">
                <h2 class="post-detail-title">{{ post.title }}</h2>
                <button class="close-button" @click="closePostDetail">关闭</button>
            </div>
            <div class="post-detail-meta">
                <span>作者: {{ post.author }}</span>
                <span>{{ formatDate(post.createdAt) }}</span>
                <span v-if="getCategoryName(post.categoryId)">分类: {{ getCategoryName(post.categoryId) }}</span>
            </div>
            <div class="post-detail-content">
                {{ post.content }}
            </div>
            <div class="comment-section">
                <h3>评论 ({{ comments.length }})</h3>
                <div class="comment-form">
                    <h4>添加评论</h4>
                    <div class="form-group">
                        <label>评论者</label>
                        <input type="text" v-model="newComment.author" placeholder="输入您的名字">
                    </div>
                    <div class="form-group">
                        <label>评论内容</label>
                        <textarea v-model="newComment.content" placeholder="输入评论内容"></textarea>
                    </div>
                    <button class="btn" @click="addComment">提交评论</button>
                </div>
                <div class="comment-list">
                    <div class="comment-item" v-for="comment in comments" :key="comment.id">
                        <div class="comment-content">{{ comment.content }}</div>
                        <div class="comment-meta">
                            <span>作者: {{ comment.author }}</span>
                            <span>{{ formatDate(comment.createdAt) }}</span>
                        </div>
                    </div>
                    <div v-if="comments.length === 0" class="loading">暂无评论</div>
                </div>
            </div>
        </div>
    </div>`,
    props: ['appModule'],
    data() {
        return {
            newComment: { author: '', content: '' }
        };
    },
    computed: {
        post() {
            return this.appModule && this.appModule.postModule ?
                this.appModule.postModule.selectedPost : {};
        },
        comments() {
            if (!this.post || !this.post.id) return [];

            return this.appModule && this.appModule.commentModule ?
                this.appModule.commentModule.comments.filter(c => c.postId === this.post.id) : [];
        }
    },
    methods: {
        closePostDetail() {
            if (this.appModule && this.appModule.postModule) {
                this.appModule.postModule.selectedPost = null;
            }
        },
        addComment() {
            if (!this.newComment.author || !this.newComment.content) {
                alert('请填写评论者和评论内容');
                return;
            }

            if (this.appModule && this.appModule.commentModule && this.post.id) {
                this.appModule.commentModule.addComment(
                    this.newComment.content,
                    this.newComment.author,
                    this.post.id
                );
                this.newComment = { author: '', content: '' };
            }
        },
        getCategoryName(categoryId) {
            if (!categoryId || !this.appModule || !this.appModule.categoryModule) return '';

            const category = this.appModule.categoryModule.categories.find(c => c.id === categoryId);
            return category ? category.name : '';
        },
        formatDate(date) {
            return date ? new Date(date).toLocaleDateString() : '';
        }
    }
};

export { postDetailComponent };